<template>
	<div class="dashboard">
		<div class="content">
			<div class="top-container">
				<div class="nav-container">
					<div class="nav-btn-item nav-btn-active">综合统计</div>
				<div
					class="nav-btn-item"
					@click="handleNavBtnClick('/pc-page2')"
				>
						运营情况
					</div>
					<div
						class="nav-btn-item"
					@click="handleNavBtnClick('/pc-page3')"
					>
						工程情况
					</div>
				</div>
				<div class="logo-container">
					<img
						class="logo-img"
						src="./images/logoText.png"
						alt="logo"
					/>
				</div>
				<div class="time-container">
					<div class="time-icon-wrapper">
						<img
							class="time-icon-img"
							src="./images/time.png"
							alt="time"
						/>
					</div>
					<div class="time-display-text">11:15</div>
					<div class="date-info-wrapper">
						<div class="date-text">2021年04月25日</div>
						<div class="week-text">星期四</div>
					</div>
				</div>
			</div>
			<div class="content-top">
				<div class="content-top-left">
					<pcPage1ItemBox1 ref="itemBox1" :chartData="pageData1" />
					<pcPage1ItemBox2 ref="itemBox2" :storageData="pageData2" />
				</div>
				<div class="echart-box-center">
					<div class="command-center-wrapper">
						<div class="command-center-stats">
							<div
								class="stat-item"
								v-for="(item, index) in summaryData"
								:key="index"
							>
								<div class="stat-value">
									{{ item.value
									}}<span class="stat-unit">{{
										item.unit
									}}</span>
								</div>
								<div class="stat-label">{{ item.label }}</div>
							</div>
						</div>
					</div>

				<div class="page1-centet-wrapper">
					<pcPage1Centet
						ref="page1Centet"
						:companiesData="companiesData"
					/>
				</div>
				</div>
				<div class="content-top-right">
					<pcPage1ItemBox3 ref="itemBox3" :chartData="pageData3" />
					<pcPage1ItemBox4 ref="itemBox4" :chartData="pageData4" />
				</div>
			</div>
			<div class="content-bottom">
				<pcPage1ItemBox5 ref="itemBox5" :chartData="pageData5" />
				<pcPage1ItemBox6 ref="itemBox6" :chartData="pageData6" />
				<pcPage1ItemBox7 ref="itemBox7" :chartData="pageData7" />
				<pcPage1ItemBox8 ref="itemBox8" :securityData="pageData8" />
			</div>
		</div>
	</div>
</template>

<script>
import pcPage1ItemBox1 from "./components/pc-page1/pc-page1-item-box-1.vue";
import pcPage1ItemBox2 from "./components/pc-page1/pc-page1-item-box-2.vue";
import pcPage1ItemBox3 from "./components/pc-page1/pc-page1-item-box-3.vue";
import pcPage1ItemBox4 from "./components/pc-page1/pc-page1-item-box-4.vue";
import pcPage1Centet from "./components/pc-page1/pc-page1-centet.vue";
import pcPage1ItemBox5 from "./components/pc-page1/pc-page1-item-box-5.vue";
import pcPage1ItemBox6 from "./components/pc-page1/pc-page1-item-box-6.vue";
import pcPage1ItemBox7 from "./components/pc-page1/pc-page1-item-box-7.vue";
import pcPage1ItemBox8 from "./components/pc-page1/pc-page1-item-box-8.vue";
export default {
    components: {
		pcPage1ItemBox1,
		pcPage1ItemBox2,
		pcPage1ItemBox3,
		pcPage1ItemBox4,
		pcPage1Centet,
        pcPage1ItemBox5,
        pcPage1ItemBox6,
        pcPage1ItemBox7,
        pcPage1ItemBox8,
	},
	data() {
		return {
			// 供应统计数据（对应：pad-page1-item-box-1「供应统计」）
			pageData1: [
				{ name: "1月", value: 850 },
				{ name: "2月", value: 750 },
				{ name: "3月", value: 900 },
				{ name: "4月", value: 950 },
				{ name: "5月", value: 800 },
				{ name: "6月", value: 900 },
				{ name: "7月", value: 950 },
				{ name: "8月", value: 750 },
				{ name: "9月", value: 500 },
				{ name: "10月", value: 600 },
				{ name: "11月", value: 700 },
				{ name: "12月", value: 550 },
			],
			// 存量情况数据（对应：pad-page1-item-box-2「存量情况」）
			pageData2: {
				storage1: {
					title: "管存量",
					value: 999999,
					unit: "万/m³",
					subtitle: "管存占比",
					percentage: 32,
				},
				storage2: {
					title: "管存量",
					value: 999999,
					unit: "万/m³",
					subtitle: "管存占比",
					percentage: 78,
				},
			},
			// 客户统计数据（对应：pad-page1-item-box-3「客户统计」）
			pageData3: [
				{ name: "民用户", value: 1230, color: "#005cc577" },
				{ name: "非民用户", value: 1000, color: "#93d4fa77" },
			],
			// 热线情况数据（对应：pad-page1-item-box-4「热线情况」）
			pageData4: [
				{ name: "1月", value: 200 },
				{ name: "2月", value: 240 },
				{ name: "3月", value: 200 },
				{ name: "4月", value: 170 },
				{ name: "5月", value: 240 },
				{ name: "6月", value: 120 },
				{ name: "7月", value: 170 },
				{ name: "8月", value: 150 },
				{ name: "9月", value: 130 },
				{ name: "10月", value: 120 },
				{ name: "11月", value: 150 },
				{ name: "12月", value: 120 },
			],
			// 销气统计数据（对应：pad-page1-item-box-5「销气统计」）
			pageData5: [
				{ name: "1日", value: 250 },
				{ name: "2日", value: 680 },
				{ name: "3日", value: 280 },
				{ name: "4日", value: 650 },
				{ name: "5日", value: 450 },
				{ name: "6日", value: 200 },
				{ name: "7日", value: 400 },
				{ name: "8日", value: 900 },
				{ name: "9日", value: 180 },
				{ name: "10日", value: 180 },
				{ name: "11日", value: 200 },
				{ name: "12日", value: 400 }
			],
			// 工程信息数据（对应：pad-page1-item-box-6「工程信息」）
			pageData6: [
				{ name: "中央资金", value: 41, color: "#0115b477" },
				{ name: "非民用工程", value: 32, color: "#495dff77" },
				{ name: "国债资金", value: 41, color: "#3190ff77" },
				{ name: "小微工程", value: 15, color: "#7laaff77" },
				{ name: "小区工程", value: 39, color: "#69cde777" },
				{ name: "液改气工程", value: 2, color: "#cbebff77" }
			],
			// 业务处理数据（对应：pad-page1-item-box-7「业务处理」）
			pageData7: [
				{ name: "1月", value: 700 },
				{ name: "2月", value: 500 },
				{ name: "3月", value: 650 },
				{ name: "4月", value: 628 },
				{ name: "5月", value: 500 },
				{ name: "6月", value: 620 }
			],
			// 安检进度数据（对应：pad-page1-item-box-8「安检进度」）
			pageData8: {
				totalCount: 999999,
				completionRate: 58,
				yearlyTotal: 10000,
				completedCount: 5800
			},
			// 中央综合统计数据
			summaryData: [
				{ value: "1268", unit: "km", label: "管网长度" },
				{ value: "368", unit: "个", label: "调压设施" },
				{ value: "6947", unit: "万/m³", label: "年销气总量" },
				{ value: "286", unit: "个", label: "场站数量" },
				{ value: "692", unit: "户", label: "用户数量" },
			],
            // 飞线图公司数据
			companiesData: [
				{
					name: '长春市燃气', 
					coord: [497, 498], 
					isCenter: true,
					pipelineLength: 1580.5,
					regulatingFacilities: 156,
					annualGasSales: 28.6,
					stationCount: 12,
					userCount: 158000
				},
				{
					name: '德惠公司', 
					coord: [630, 564],
					pipelineLength: 456.8,
					regulatingFacilities: 45,
					annualGasSales: 8.9,
					stationCount: 5,
					userCount: 42000
				},
				{
					name: '双阳公司', 
					coord: [531, 438],
					pipelineLength: 389.2,
					regulatingFacilities: 38,
					annualGasSales: 7.2,
					stationCount: 4,
					userCount: 35000
				},
				{
					name: '公主岭公司', 
					coord: [371, 418],
					pipelineLength: 523.6,
					regulatingFacilities: 52,
					annualGasSales: 10.5,
					stationCount: 6,
					userCount: 48000
				},
				{
					name: '长白山分公司', 
					coord: [730, 199],
					pipelineLength: 234.5,
					regulatingFacilities: 28,
					annualGasSales: 4.8,
					stationCount: 3,
					userCount: 22000
				},
				{
					name: '龙井分公司', 
					coord: [1028, 299],
					pipelineLength: 187.3,
					regulatingFacilities: 22,
					annualGasSales: 3.6,
					stationCount: 2,
					userCount: 18000
				},
				{
					name: '图们分公司', 
					coord: [1049, 332],
					pipelineLength: 198.7,
					regulatingFacilities: 24,
					annualGasSales: 4.1,
					stationCount: 3,
					userCount: 19500
				},
				{
					name: '延边分公司', 
					coord: [995, 352],
					pipelineLength: 312.4,
					regulatingFacilities: 35,
					annualGasSales: 6.8,
					stationCount: 4,
					userCount: 31000
				},
				{
					name: '琿春分公司', 
					coord: [1128, 385],
					pipelineLength: 156.9,
					regulatingFacilities: 18,
					annualGasSales: 2.9,
					stationCount: 2,
					userCount: 15000
				}
			]
		};
	},

	mounted() {
		this.pageinit();
	},
	methods: {
		pageinit() {
			this.$nextTick(() => {
				// 调用所有组件的初始化方法
				this.$refs.itemBox1.initChart();
				this.$refs.itemBox2.initChart();
				this.$refs.itemBox3.initChart();
				this.$refs.itemBox4.initChart();
                this.$refs.itemBox5.initChart();
                this.$refs.itemBox6.initChart();
                this.$refs.itemBox7.initChart();
				this.$refs.page1Centet.initChart();
			});
		},
		handleNavBtnClick(path) {
			this.$router.push(path);
		},
	},
};
</script>

<style scoped lang="scss">
// SCSS 变量定义
$dashboard-width: 2704px;
$dashboard-height: 1560px;
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);
$tertiary-color: rgba(255, 255, 255, 0.6);

// 主容器
.dashboard {
	width: $dashboard-width;
	height: $dashboard-height;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	background: {
		image: url("./images/bg02.jpg");
		size: 100% 100%;
		repeat: no-repeat;
		position: center center;
	}
}
// 内容容器
.content {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	background: {
		image: url("./images/top.png");
		size: 100% 80%;
		repeat: no-repeat;
		position: center top;
	}
}
// 顶部容器
.top-container {
	width: 100%;
	height: 107px; // scaled from 126px by ~0.848
	display: flex;
	justify-content: space-between;
	align-items: center;
	// padding: 0 60px;
	position: relative;
}

// 导航容器
.nav-container {
	margin-left: 58px; // scaled from 60px by ~0.966
	display: flex;
	gap: 19px; // scaled from 20px by ~0.966
}

// 导航按钮
.nav-btn-item {
	width: 193px; // scaled from 200px by ~0.966
	height: 76px; // scaled from 90px by ~0.848
	background: {
		image: url("./images/navBtnNormal.png");
		size: 100% 100%;
		repeat: no-repeat;
	}
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px; // scaled from 24px by ~0.848
	color: $primary-color;
	cursor: pointer;
}

// 激活状态的导航按钮
.nav-btn-active {
	background-image: url("./images/navBtn.png");
}

// Logo容器
.logo-container {
	position: absolute;
	left: calc(50% + 32px); // scaled from +33px by ~0.966
	transform: translateX(-50%);
	top: 31px; // scaled from 36px by ~0.848

	.logo-img {
		height: 62px; // scaled from 73px by ~0.848
	}
}

// 时间容器
.time-container {
	display: flex;
	align-items: center;
	gap: 23px; // scaled from 24px by ~0.966
	margin-right: 58px; // scaled from 60px by ~0.966

	.time-icon-img {
		width: 62px; // scaled from 73px by ~0.848
		height: 62px; // scaled from 73px by ~0.848
	}

	.time-display-text {
		font-size: 50px; // scaled from 59px by ~0.848
		color: $primary-color;
		font-weight: bold;
		margin-right: 23px; // scaled from 24px by ~0.966
	}

	.date-info-wrapper {
		display: flex;
		flex-direction: column;
		gap: 5px;

		.date-text {
			font-size: 20px; // scaled from 24px by ~0.848
			color: $secondary-color;
		}

		.week-text {
			font-size: 19px; // scaled from 22px by ~0.848
			color: $tertiary-color;
		}
	}
}
.content-top {
	display: flex;
	// padding: 0 65px;
	justify-content: space-between;
	width: 100%;
	.content-top-left {
		flex-flow: column;
		width: 676px; // scaled from 700px by ~0.966
		margin-left: 63px; // scaled from 65px by ~0.966
		> div {
			margin-bottom: 59px; // scaled from 70px by ~0.848
		}
	}
	.content-top-right {
		flex-flow: column;
		width: 676px; // scaled from 700px by ~0.966
		margin-right: 63px; // scaled from 65px by ~0.966
		> div {
			margin-bottom: 59px; // scaled from 70px by ~0.848
		}
	}

	// 综合调度指挥中心样式
	.echart-box-center {
		flex: 1;
		width: 1894px; // scaled from 1960px by ~0.966
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 85px 29px 0; // scaled from 100px 30px 0
	}

	.command-center-wrapper {
		width: 1256px; // scaled from 1300px by ~0.966
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 25px; // scaled from 30px by ~0.848

		.command-center-stats {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin-top: 17px; // scaled from 20px by ~0.848
		}

		.stat-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 14px; // scaled from 0 15px by ~0.966
		}

		.stat-value {
			font-size: 46px; // scaled from 54px by ~0.848
			font-weight: bold;
			margin-bottom: 10px;
		}

		.stat-item:nth-child(1) .stat-value {
			color: #f5e17a;
		}

		.stat-item:nth-child(2) .stat-value {
			color: #3cffb3;
		}

		.stat-item:nth-child(3) .stat-value {
			color: #6ad4ff;
		}

		.stat-item:nth-child(4) .stat-value {
			color: #a2c4ff;
		}

		.stat-item:nth-child(5) .stat-value {
			color: #ffb88c;
		}

		.stat-unit {
			font-size: 20px; // scaled from 24px by ~0.848
			margin-left: 5px;
		}

		.stat-label {
			font-size: 20px; // scaled from 24px by ~0.848
			color: #fff;
		}

		
	}
    .page1-centet-wrapper {
		display: block;
		width: 1256px; // scaled from 1300px by ~0.966
		height: 717px; // scaled from 728px by ~0.848; ensure non-zero height for ECharts container
    }
}
.content-bottom{
    display: flex;
    justify-content: space-between;
	width: calc(100% - 126px); // scaled from 130px by ~0.966
	padding: 0 63px; // scaled from 0 65px by ~0.966
}
</style>